<template>
    <div class="workList">
        <!-- 使用v-loading在接口未请求到数据之前，显示加载中，直到请求到数据后消失。 -->
        <el-table :data="tableData" v-loading="loading" border class="table">
            <el-table-column prop="id" label="用户ID" align="center">
            </el-table-column>
            <el-table-column prop="userId" label="所属班级" align="center">
            </el-table-column>
            <el-table-column prop="title" label="作业名称" align="center">
            </el-table-column>
            <el-table-column prop="completed_text" label="完成情况" align="center">
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
// 将获取数据的方法进行了封装，封装并且提取到table.js文件
// 向后台请求的时候传入分页参数，每次获取展示的信息，而不是全部的信息
import { getWorkTableData } from '@/utils/table.js'
export default {
    data() {
        return {
            tableData: [],
            loading: false,
            currentPage: 1,
            pageSize: 10,
            total: 0
        }
    },
    methods: {
        handleSizeChange(val) {
            // 这里的val是自动传入的
            this.pageSize = val;
            this.currentPage = 1;
            getWorkTableData(this, '/works', { page: this.currentPage, size: this.pageSize }, ["completed"])
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            getWorkTableData(this, '/works', { page: this.currentPage, size: this.pageSize }, ["completed"])
        },

    },
    created() {
        // function getWorkTableData(root, url, params, arr)
        // 这里传入的params参数，用于分页，而不是一次性获取全部的数据
        // getWorkTableData(this, '/works', { page: this.currentPage, size: this.pageSize }, ["completed"])
    },
    mounted() {
        // 在data 中定义初始化， loading: false，
        // 同时在mounted()中将 this.loading设置为true,再去请求接口
        this.loading = true;
        getWorkTableData(this, '/works', { page: this.currentPage, size: this.pageSize }, ["completed"])
    }
}
</script>
<style lang="scss" scoped>
.workList {
    .table {
        width: 100%;
    }

    .el-pagination {
        text-align: left;
        margin-top: 20px;
    }
}
</style>